<template>
  <div>
    <el-card>
      <el-tabs>
        <el-tab-pane label="账户设置">
          <el-form ref="accountQueryList" :inline="true" class="top-form">
            <el-form-item label="账号">
              <el-input v-model="accountQueryList.account" style="width:350px" />
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="accountQueryList.userName" style="width:350px" />
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="accountQueryList.mobile" style="width:350px" />
            </el-form-item>
            <el-form-item label="职位">
              <el-input v-show="isInputShow" v-model="accountQueryList.position" style="width:350px" />
            </el-form-item>
          </el-form>
          <el-row type="flex" justify="end">
            <div class="btn">
              <el-button type="primary" @click="query">查询</el-button>
              <el-button>重置</el-button>
              <el-button v-show="!isInputShow" type="text" @click="isInputShow=true">展开</el-button>
            </div>
          </el-row>
          <div class="add-btn">
            <el-button type="primary" @click="goAdd">
              <i class="el-icon-plus" />
              新增
            </el-button>
          </div>
          <el-table :data="tableData">
            <el-table-column type="selection" />
            <el-table-column label="账号">
              <template #default="{ row }">{{ row.account }}</template>
            </el-table-column>
            <el-table-column label="姓名">
              <template #default="{ row }">
                {{ row.userName }}
              </template>
            </el-table-column>
            <el-table-column label="联系电话">
              <template #default="{ row }">{{ row.mobile }}</template>
            </el-table-column>
            <el-table-column label="职位">
              <template #default="{ row }">{{ row.position }}</template>
            </el-table-column>
            <el-table-column label="状态">
              <template #default="{ row }">{{ row.state }}</template>
            </el-table-column>
            <el-table-column label="操作" width="300px">
              <template #default="{row}">
                <el-button type="primary" size="mini" @click="goEdit(row)">编辑</el-button>
                <el-button type="warning" size="mini" @click="reSetPwd(row)">重置密码</el-button>
                <el-button type="infor" size="mini">停用</el-button>
                <el-popconfirm
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  :title="'确定要删除'+row.userName+'吗？'"
                  @onConfirm="goDel(row.id)"
                >
                  <el-button slot="reference" type="danger" size="mini">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <el-row type="flex" justify="center">
            <el-pagination
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              :current-page="pageData.page"
              :page-sizes="[1, 3, 5, 7]"
              :page-size="pageData.size"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="参数设置">
          <el-alert
            class="alert"
            title="帮助提示"
            type="success"
            show-icon
            bordered
          >
            <template #default>
              <div>你所提交的信息已经审核通过，请及时到xxx注册编码"</div>
              <div style="margin-top:10px">
                <el-link>前往注册</el-link>
              </div>
            </template>
          </el-alert>
          <div class="block slider">
            <span class="text">店铺订单抽取比例</span>
            <el-slider v-model="orderProp" show-input style="width:50%;margin-left:200px" :disabled="!isEdit" />
          </div>
          <div class="block slider">
            <span class="text">用户素材抽取比例</span>
            <el-slider v-model="materialProp" style="width:50%;margin-left:200px" show-input :disabled="!isEdit" />
            <!-- <span>%</span> -->
          </div>
          <el-row style="margin-left:50px">
            <el-button v-if="!isEdit" type="primary" size="small" @click="isEdit=!isEdit">编辑</el-button>
            <el-button v-else size="small" @click="isEdit=!isEdit">完成</el-button>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-dialog :title="isAdd?'新增用户':'编辑用户'" :visible.sync="isDialogShow" width="40%" @close="onCancel">
      <el-form ref="userform" label-width="80px" :rules="formRules" :model="userForm">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="userForm.userName" placeholder="请输入用户名" />
        </el-form-item>
        <!-- <el-form-item label="密码" prop="password">
          <el-input v-model="userForm.password" type="password" placeholder="请输入密码" />
        </el-form-item> -->
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="userForm.mobile" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="职称" prop="position">
          <el-select v-model="userForm.position" placeholder="请选择职称" style="width:100%">
            <el-option label="老板" value="老板" />
            <el-option label="打工仔" value="打工仔" />
          </el-select>
        </el-form-item>
        <el-form-item label="权限">
          <el-tree
            ref="rightTree"
            :data="treeData"
            show-checkbox
            node-key="id"
            default-expand-all
            check-strictly
            :props="defaultProps"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-row type="flex" justify="end">
          <el-button @click="onCancel">取消</el-button>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </el-row>
      </template>
    </el-dialog>
    <el-dialog :visible="pwdDialogShow">
      <el-form ref="pwdForm" :model="passwordForm" status-icon :rules="formRules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="密码" prop="password">
          <el-input v-model="passwordForm.password" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input v-model="passwordForm.checkPass" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getUserList, delUserData, addUserData, editUserData, getRightList } from '@/api/system'
import { transListToTreeData } from '@/utils/index.js'
export default {
  name: 'System',
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      accountQueryList: {},
      isInputShow: false,
      tableData: [
        {
          account: '', // 账号
          userName: '', // 姓名
          mobile: '', // 联系电话
          position: '', // 职位
          state: '' // 状态
        }
      ],
      total: 1,
      pageData: {
        _page: 1,
        _limit: 1
      },
      isDialogShow: false,
      isAdd: true,
      userForm: {

      },
      pwdDialogShow: false,
      passwordForm: {},
      formRules: {
        userName: [
          { required: true, message: '用户名不能为空', trriger: 'blur' }
        ],
        password: [
          { min: 6, max: 13, trigger: 'blur', message: '密码要求6-13个字符' },
          { required: true, message: '密码不能为空', trriger: 'blur' }
        ],
        position: [
          { required: true, message: '职称不能为空', trriger: 'blur' }
        ],
        mobile: [
          { min: 6, max: 13, trigger: 'blur', message: '密码要求6-13个字符' },
          { type: 'mobile', message: '请输入手机号', trigger: ['blur'] }
        ],
        checkPass: [
          { min: 6, max: 13, trigger: 'blur', message: '密码要求6-13个字符' },
          { validator: validatePass, trigger: 'blur' }
        ]
      },
      rightList: [{ id: 1, pid: 0, name: 'Shop', label: '店铺管理' }, { id: 2, pid: 1, name: 'ShopList', label: '商铺列表' }, { id: 3, pid: 1, name: 'ProductList', label: '产品列表' }, { id: 4, pid: 1, name: 'SetUpShopAudit', label: '开店审核' }, { id: 5, pid: 1, name: 'ShopSetting', label: '店铺设置' }, { id: 6, pid: 0, name: 'BusinessDistrict', label: '商圈管理' }, { id: 7, pid: 0, name: 'Order', label: '订单管理' }, { id: 8, pid: 7, name: 'OrderList', label: '订单列表' }, { id: 9, pid: 7, name: 'OrderStatistics', label: '订单统计' }, { id: 10, pid: 0, name: 'material', label: '素材管理' }, { id: 11, pid: 10, name: 'OfficialMaterial', label: '官方素材' }, { id: 12, pid: 10, name: 'MaterialList', label: '素材列表' }, { id: 13, pid: 0, name: 'DiscountCoupon', label: '优惠券管理' }, { id: 14, pid: 13, name: 'GeneralDiscountCoupon', label: '通用优惠券' }, { id: 15, pid: 13, name: 'ShopDiscountCoupon', label: '店铺优惠券' }, { id: 16, pid: 0, name: 'Finance', label: '财务管理' }, { id: 17, pid: 16, name: 'IncomeAndExpenses', label: '平台收支明细' }, { id: 18, pid: 16, name: 'WithdrawDeposit', label: '提现管理' }, { id: 19, pid: 0, name: 'System', label: '系统设置' }],
      treeData: [
        { pid: 0, rightName: '商铺管理', id: 1, children: [{ pid: 1, rightName: '店铺列表', id: 2 }] }],
      defaultProps: {
        label: 'label',
        children: 'children'
      },
      // 这个是滚动条数据
      isEdit: false,
      materialProp: 0,
      orderProp: 0
    }
  },
  created() {
    this.getUserList()
    this.getRightList()
  },
  methods: {
    async getUserList() {
      const { data: data } = await getUserList(this.pageData)
      // console.log(data)
      if (data.data.length === 0 && this.pageData._page !== 1) {
        this.pageData._page--
        this.getUserList()
      } else {
        this.tableData = data.data
        this.total = data.total
      }
    },
    async goDel(uid) {
      await delUserData(uid)
      this.getUserList()
      this.$message.success('删除成功')
    },
    goAdd() {
      this.isAdd = true
      this.isDialogShow = true
    },
    goEdit(row) {
      this.userForm = row
      this.isAdd = false
      this.setCheckedKeys(row.rightIds)
      this.isDialogShow = true
    },
    onCancel() {
      this.isDialogShow = false
      this.userForm = {}
      this.$refs.userform.resetFields()
    },
    onSubmit() {
      this.userForm.rightIds = this.getCheckedKeys()
      this.$refs.userform.validate().then(async() => {
        if (this.userForm.id) {
          await editUserData(this.userForm)
          // console.log(data.data, '新增')
          this.$message.success('新增用户成功')
        } else {
          await addUserData(this.userForm)
          // console.log(data.data, '编辑')
          this.$message.success('修改用户成功')
        }
        this.getUserList()
        this.isDialogShow = false
        this.$refs.userform.resetFields()
      })
    },
    async query() {
      const { data } = await getUserList({ ...this.filter(this.accountQueryList) })
      // console.log(data, '查到了所有')
      this.total = data.data.length
      this.pageData._page = 1
      if (data.total <= this.pageData._limit) {
        this.tableData = data.data
      } else {
        this.tableData = data.data.filter((k, i) => i < this.pageData._limit)
      }
    },
    reSetPwd(row) {
      this.pwdDialogShow = true
      this.userForm.id = row.id
    },
    // 改密码的操作还没做完
    submitForm() {
      this.$refs.pwdForm.validate().then(() => {
        editUserData({ password: this.passwordForm.password, id: this.userForm.id })
      })
    },
    resetForm() {
      this.pwdDialogShow = false
      this.$refs.pwdForm.resetFields()
      this.passwordForm = {}
    },
    handleSizeChange(limit) {
      this.pageData._limit = limit
      this.getUserList()
    },
    handleCurrentChange(page) {
      this.pageData._page = page
      this.getUserList()
    },
    setCheckedKeys(key) {
      const keys = this.$refs.rightTree.setCheckedKeys(key, true)
      return keys
    },
    getCheckedKeys() {
      const keys = this.$refs.rightTree.getCheckedKeys()
      // console.log(keys)
      return keys
    },
    filter(data) {
      var queryList = {}
      for (var k in data) {
        if (data[k]) {
          queryList[k] = data[k]
        }
      }
      return queryList
    },
    async getRightList() {
      const { data } = await getRightList()
      this.treeData = transListToTreeData(data.data, 0)
      // console.log(this.treeData, '权限列表')
    }
  }
}
</script>

<style lang="scss" scoped>
.top-form {
  padding-top: 25px;
  display:flex;
  justify-content: space-around;
}
::v-deep.el-form--inline .el-form-item {
  margin-right: 50px;
  margin-left: 50px;
}
.add-btn {
  padding-bottom: 20px;
}
.el-pagination {
  padding-top: 30px;
}
.btn {
  margin-right: 80px;
}
.el-alert {
  margin-bottom: 30px;
}
.slider {
  position: relative;
  margin-bottom: 20px;
  .text {
    position: absolute;
    left: 50px;
    top: 10px;
  }
  // span {
  //   position: absolute;
  //   right:37%;
  //   top: 10px;
  // }
}
.el-slider__input {
  position: relative;
}
::v-deep .el-slider__input::after{
  content: '%';
  display: inline-block;
  position: absolute;
  right: 0;
  width: 30px;
  height: 30px;
  right: -40px;
  top: 2px;
  // float: left;
}
</style>

